<template>
    <div>
        <h2 >门店列表表表表</h2>
            门店名称:<input type="text" v-model.trim="info.name">
            开店时间:<input type="date"  v-model="info.opntimes">-<input type="date" v-model="info.opntimee">
      
        <input type="button" class="btn btn-info" value="查询" @click="geShopList,goPage">
         <input type="button" class="btn btn-success" value="重置" @click="">

            <table class="table table-bordered">
                <tbody>
                    <tr class="bg-primary">
                        <td>门店名称</td>
                        <td>分店名称</td>
                        <td>门店图片</td>
                        <td>开业时间</td>
                        <td>是否启用</td>
                        <td>门店特色</td>
                        <td>联系电话</td>
                        <td>门店介绍</td>
                        <td>门店类型</td>
                        <td>门店地址</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="i in data.list" :key="i.shopId">
                        <td>{{ i.shopName}}</td>
                        <td>{{ i.brachName}}</td>
                        <td><img :src="i.shopImg"  width="50" height="50"/></td>
                        <td>{{ moment(i.openTime).format('YYYY-MM-DD') }}</td>
                        <td>{{ i.state=='0' ?'启用':"禁用"}}</td>
                        <td>{{ i.tese}}</td>
                        <td>{{ i.tel}}</td>
                        <td>{{ i.desc}}</td>
                        <td>{{ i.shopType}}</td>
                        <td>{{ i.addressName}}</td>
                        <td> 
                            <input type="button" class="btn btn-danger" value="删除" @click=""> 
                            <input   type="button" class="btn btn-primary" value="修改" @click="">
                        </td>    
                    </tr>
                </tbody>
        </table>

        <!--分页-->
        <div>
            <!-- 显示数据 -->
            <span>共{{ data.totalcount }} 条数据</span>
            <span>每页{{ info.pagesize }} 条数据</span>
            <span>当前第{{ info.pageindex }}/{{data.totalpage}}页数据</span>
            <!-- 改变页码 -->
            <input type="button" value="首页" @click="goPage(1)">
            <input type="button" value="上一页"  @click="goPage(info.pageindex-1)">
            <input v-for="i in data.totalpage" type="button" :value="i" @click="goPage(i)">
            <input type="button" value="下一页"  @click="goPage(info.pageindex+1)">
            <input type="button" value="尾页" @click="goPage(data.totalpage)">
            <input type="number" v-model="info.pageindex"><input type="button" value="跳转" @click="goPage(info.pageindex)">
            <!-- 改变页容量 -->
            <select v-model="info.pagesize" @change="geShopList">
                <option :value="item"  v-for="item in arr">每页{{item}}条</option>
            </select>
            
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import moment from "moment";
import { ref,reactive,onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";



let arr:any =ref([3,4,6,8])

         
//路由器对象
const router=useRouter();

const route= useRoute();

//获取参数列表
let info:any=reactive({
    name:'',
    opntimes:'',
    opntimee:'',
    pageindex:1,
    pagesize:3,
})

//接受后端返回的数据
let data:any = reactive({
    list:[],
    totalcount:0,//总行数
    totalpage:0 //总页数
})




onMounted(()=>{
    //直接发送到网络请求
    geShopList();
})


//改变页码
const goPage=(num:any)=>{
    console.log('num',num);
    //公司便页码的值
    if(num<1)
    {
        info.pageindex=1;
        return;
    }
    if(num>data.totalpage)
    {
        info.pageindex=data.totalpage;
        return;
    }
    //改变页码的值
    info.pageindex=num;
     geShopList();
}




//获取门店列表
const geShopList=()=>{
    
    axios({
        url:'http://localhost:5194/api/Shop/ShowShop',//404
        method:'get',//405
        params:info //网络请求传参//415
    })
    .then((res)=>{
        //then相当于success 成功 res返回成功的结果
        console.log(res);
        //将res,data里面的数据放到
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        //catch相当于error 失败 catch后端请求失败时的结果  
        console.log(err);
    })
}
</script>

<style scoped>
input[type='button'] 
{
  margin: 0 5px;
}
span
{
    margin: 4px;
}
</style>